const { createApp } = Vue;

const app = createApp({
    data() {
        return {
            users: [],
            newUser: {
                username: '',
                token_balance: 0
            },
            editingUser: {},
            editModal: null,
            models: [],
            modelsLoading: false
        };
    },
    methods: {
        async fetchUsers() {
            try {
                const response = await fetch('/api/v1/admin/users/');
                if (!response.ok) throw new Error('Failed to fetch users.');
                this.users = await response.json();
            } catch (error) {
                console.error(error);
                alert(error.message);
            }
        },
        async createUser() {
            try {
                const response = await fetch('/api/v1/admin/users/', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(this.newUser)
                });
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.detail || 'Failed to create user.');
                }
                this.newUser.username = '';
                this.newUser.token_balance = 0;
                await this.fetchUsers();
            } catch (error) {
                console.error(error);
                alert(error.message);
            }
        },
        startEdit(user) {
            this.editingUser = { ...user };
            if (this.editModal) {
                this.editModal.show();
            }
        },
        async updateBalance() {
            try {
                const response = await fetch(`/api/v1/admin/users/${this.editingUser.id}/balance` , {
                    method: 'PATCH',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ token_balance: this.editingUser.token_balance })
                });
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.detail || 'Failed to update balance.');
                }
                if (this.editModal) {
                    this.editModal.hide();
                }
                await this.fetchUsers();
            } catch (error) {
                console.error(error);
                alert(error.message);
            }
        },
        async fetchModels() {
            console.log('fetchModels called');
            this.modelsLoading = true;
            try {
                const response = await fetch('/api/v1/admin/models/');
                if (!response.ok) throw new Error('Failed to fetch models.');
                const data = await response.json();
                this.models = data.models || [];
            } catch (error) {
                console.error(error);
                alert(error.message);
            } finally {
                this.modelsLoading = false;
            }
        }
    },
    mounted() {
        this.fetchUsers();
        this.fetchModels();
        const modalElement = document.getElementById('editModal');
        if (modalElement) {
            this.editModal = new bootstrap.Modal(modalElement);
        }
    }
});

app.mount('#app');
